<template>
    <el-skeleton :loading="loading" :rows="rows" :animated="animated" :throttle="throttle">
        <template #template v-if="bizVariant === 'TableForm'">
            <GdSkeletonItem variant="rect" style="width: 100%;"
                :style="{ height: bizVariantConfig.toolbarSkeletonHeight, margin: `${bizVariantConfig.defaultMargin} 0` }" />
            <GdSkeletonItem variant="rect" style="width: 100%;"
                :style="{ height: bizVariantConfig.tableSkeletonHeight }" />
        </template>
        <template v-for="(slotVal, slotName, index) in $slots" :key="slotName" #[slotName]>
            <slot :name="slotName" v-if="['template', 'default'].includes(slotName)"></slot>
        </template>
    </el-skeleton>
</template>
<script setup>
// #ifdef H5
import { ElSkeleton } from 'element-plus';
import "element-plus/theme-chalk/el-skeleton.css";
// #endif
import GdSkeletonItem from './gd-skeleton-item.vue';
const props = defineProps({
    loading: {
        type: Boolean,
        default: true
    },
    bizVariant: {
        type: String,
        validator(value) {
            return ["TableForm",""].includes(value);
        },
        default: ""
    },
    bizVariantConfig: {
        type: Object,
        default: () => ({})
    },
    rows: {
        type: Number,
        default: 5
    },
    count: {
        type: Number,
        default: 1
    },
    animated: {
        type: Boolean,
        default: true
    },
    throttle: {
        type: Number,
        default: 0
    }
})
</script>